<template>
  <PageWrapper>
    <n-card :bordered="false" class="mb-3 proCard">
      <n-space align="center">
        <n-input-group style="width: 380px">
          <n-input
            :style="{ width: '100%' }"
            v-model:value="params.operator"
            clearable
            placeholder="请输入操作人"
            @keyup.enter="reloadTable"
          />
          <n-button type="primary" @click="reloadTable">
            <template #icon>
              <n-icon>
                <SearchOutlined />
              </n-icon>
            </template>
            查询
          </n-button>
        </n-input-group>
      </n-space>
    </n-card>
    <n-card :bordered="false" class="proCard">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="basicTableRef"
      />
    </n-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { BasicTable } from '@/components/Table';
  import { logsList } from '@/api/system/logs';
  import { SearchOutlined } from '@vicons/antd';
  import { columns } from './columns';

  const basicTableRef = ref();
  const tableData = ref();

  const params = reactive({
    operator: '',
  });

  const loadDataTable = async (res) => {
    const result = await logsList({ ...params, ...res });
    tableData.value = result.list;
    return result;
  };

  function reloadTable() {
    basicTableRef.value.reload();
  }
</script>

<style lang="less" scoped></style>
